<template>
    <div class="record">


        <!--S头部-->
        <div id="header" ref="header">
            <!--S用户头像昵称红包标题-->
            <img class="header" v-lazy="red.owner_header" />
            <p class="nickname">{{red.owner_nickname}}的红包</p>
            <p class="title">{{red.title}}</p>
            <!--E用户头像昵称红包标题-->
            <h2 class="number">红包数量{{red.numbered}} / {{red.number}}</h2>
        </div>
        <!--E头部-->

        <!--S列表-->
        <div id="list"  v-if="data.length > 0">
            <cube-scroll
                    ref="scroll"
                    :options="scroll_option"
                    @pulling-up="upLoad"
            >
                    <div class="list">
                        <dl v-for="item in data"
                            :key="item.id"
                            >
                            <dt><img v-lazy="item.user.avatar" /></dt>
                            <dd class="nickname">{{item.user.nickname}}</dd>
                            <dd class="money">{{item.money}} 元</dd>
                            <dd class="time">{{item.time}}</dd>
                            <dd class="share" v-if="item.share_award">
                                助力红包：{{item.share_award.user.nickname}} <img v-lazy="item.share_award.user.avatar" /> {{item.share_award.money}}元
                            </dd>
                        </dl>
                    </div>
                <!--E列表-->
            </cube-scroll>
        </div>
        <empty v-else style="height: 100%;">暂无记录</empty>
    </div>
</template>

<script>
import Empty from "@c/empty"
export default {
    name: "record",
    data() {
      return {
          // 红包id
          red_id: 0,
          // 红包信息
          red: {},
          // 数据请求状态，请求中不允许重复请求
          loading: false,
          // 列表数据
          data: [],
          // 请求下标
          limit: [0,10],
          // 滚动条配置
          scroll_option: {
              pullUpLoad:{
                  txt:{
                      more:"上拉加载",
                      noMore:"----我也是有底线的----"
                  }
              }
          }
      }
    },
    components: {
        Empty
    },
    created() {
        this.red_id = this.$route.params.record_red_id
    },
    mounted() {
        this.getOneRed()
        this.getRecord()
    },
    methods: {
        /**
         * 获取一个红包，并且插入列表
         */
        getOneRed() {
            return this.$get("red/find", {
                red_id: this.red_id
            })
                .then((res)=>{
                    let {code, data} = res.data
                    if(code === 0) {
                        this.red = data
                    }
                })
        },
        // 获取记录列表
        getRecord() {
            if(this.loading) return
            this.loading = true
            this.$get("redRecord/getList",{
                red_id: this.red_id,
                limit: this.limit
            })
                .then((res) => {
                    this.loading = false
                    let {code, data} = res.data
                    if(code === 0) {
                        this.data.push(...data)
                        this.limit[0] += this.limit[1]
                        this.$refs.scroll && this.$refs.scroll.forceUpdate(true,false)
                    } else {
                        if(this.data.length > this.limit[1]){
                            this.$refs.scroll && this.$refs.scroll.forceUpdate(true,true);
                        } else {
                            this.scroll_option.pullUpLoad = false;
                            this.$refs.scroll && this.$refs.scroll.refresh();
                        }
                    }
                })
        },
        /**
         * 上拉加载
         */
        upLoad() {
            this.getRecord()
        }
    }
}
</script>

<style scoped lang="less" src="./record.less"></style>
